---
id: "react-component-with-props-decorator"
keywords: ["react", "component", "props", "decorator"]
name: "@react.componentWithProps"
summary: "This is the `@react.componentWithProps` decorator."
category: "decorators"
---

The `@react.componentWithProps` decorator is used to annotate functions that are [React](../docs/react/elements-and-jsx.mdx) components which take in a record type as prop.
This decorator will ensure your component gets an uppercased name.

> **Note**
> The `@react.componentWithProps` decorator requires the [react-jsx or jsx config](../docs/react/installation.mdx) to be set in your `rescript.json` to enable the required React transformations.

### Example

<CodeTab labels={["ReScript", "JS Output"]}>

```res
module Hey = {
  type props = {
    name: string,
  }

  @react.componentWithProps
  let make = (props: props) => {
    <button> {React.string("Hello " ++ props.name ++ "!")} </button>
  }
}
```

```js
import * as JsxRuntime from "react/jsx-runtime";

function Playground$Hey(props) {
  return JsxRuntime.jsx("button", {
    children: "Hello " + props.name + "!",
  });
}

let Hey = {
  make: Playground$Hey,
};
```

</CodeTab>

### References

- [React Components](../docs/react/components-and-props.mdx)
